<template>
    <!--组件 将添加图片这一块  封装   提供给其他页面调用-->
    <!--图片大小、支持的最大数量  通过参数进行传递-->
    <div>
        <el-upload
                accept="image/png, image/jpeg"
                list-type="picture-card"
                :action="this.GLOBAL.serverBaseUrl + this.GLOBAL.postTestFile"
                :auto-upload="false"
                :limit="maxFileNum"
                :addPicSize="addPicSize"
                name="files"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-change="handleFileChange"
                ref="myup"
                :on-exceed="handleFileExceed">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" v-on:close="closeDialog">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    // let formData = new FormData(); //++++++++++

    export default {
        name: "addPicture",
        data(){
            return{
                maxFileNum: 3,  /*最多能上传几张图片*/
                dialogImageUrl: '',
                dialogVisible: false,
                addPicSize:'',
                formData: null,
            }
        },
        created(){  /*加载页面时执行*/

        },
        methods:{
            init(maxNum, size){
                this.maxFileNum = maxNum;
                this.addPicSize = size;
                this.formData = new FormData();
            },

            clearFiles(){
                this.formData = new FormData();
                this.$refs.myup.clearFiles();
            },

            /*检测上传的文件是否合乎规范  类型、大小  没问题返回true  有问题返回false*/
            checkFile(file){
                console.log("handleFileChange123");
                //不知为什么， 在这里 直接file.type无法直接获取文件类型（undefined）， 不过可以 file.name 获取文件名
                let o = file.name;
                let pos=o.lastIndexOf('.');  //转义一下
                let fileType = o.substring(pos+1);
                fileType = fileType.toLowerCase(); //一律转为小写
                console.log("文件类型：" + fileType);

                const isJPG = (fileType === 'jpg' || fileType === 'png');
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!isJPG) {
                    console.log("not jpg!!!");
                    // this.$message.error('上传帖子图片只能是 JPG或者PNG 格式!');
                    /*由于wangEditor和 element不兼容， element模态框、提示什么都会被编辑器强行挡住  所以这里只能把错误信息通过通知显示在右边*/
                    this.$notify.error({
                        title: '错误',
                        message: '上传帖子图片只能是 JPG或者PNG 格式!'
                    });
                    return false;
                }
                if (!isLt2M) {
                    // this.$message.error('上传帖子图片大小不能超过 2MB!');
                    this.$notify.error({
                        title: '错误',
                        message: '上传帖子图片大小不能超过 10MB!'
                    });
                    return false;
                }
                return true;
            },

            /*关闭（查看大图）对话框  时把编辑器显示出来*/
            closeDialog(){
                // this.showEditor = true;
            },

            handlePictureCardPreview(file) {
                /*可以 把 file console log 出来看到 file.url 就是一个本地的临时地址*/
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
                // this.showEditor = false;  /*隐藏编辑器*/
            },

            handleRemove(file, fileList) {
                console.log(file, fileList);
                if (this.formData.has("files")){
                    this.formData.delete("files");
                }
                for (let i = 0; i < fileList.length; i++){
                    this.formData.append("files", fileList[i].raw);
                }

            },

            /*在超出最大上传文件数 还继续上传时*/
            handleFileExceed(){
                // this.showEditor = false;
                this.$alert('最多上传' + this.maxFileNum + '张图片！', '提示', {
                    confirmButtonText: '确定',
                    callback: () => {
                        // this.showEditor = true;
                    }
                })
            },

            /*点击 删除 貌似并不会触发*/
            handleFileChange(file, fileList){
                //先检测 选择的文件符不符合规范
                if (!this.checkFile(file)){  //文件类型或大小 出现问题
                    fileList.splice(-1,1); // 使用splice删除文件，splice方法是可以改变原始数组的，这样就模拟了上传前判断文件格式
                    return;  //直接return 结束方法  不修改formdata  就相当于这次选择文件无效，没作选择
                }

                // console.log(file, fileList);
                if (this.formData.has("files")){
                    this.formData.delete("files");
                }
                for (let i = 0; i < fileList.length; i++){
                    this.formData.append("files", fileList[i].raw);
                }

                //这里的参数类型和后端的接收的类型不匹配 400
            },

            /**
             *  返回当前的 formData  里面包含了本组件苏所带有的 文件列表
             * @returns {FormData}
             */
            getFormData(){
                return this.formData;
            },

            /*暂时有点不问题， 不进行调用*/
            getFiles(){
                return this.formData.get("files");
            }
        }
    }
</script>

<style scoped>
    /*头像上传框样式*/
    .avatar-uploader{
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        /*overflow: hidden;*/
        /*width: 178px;*/
        width: 800px;
        height: 178px;
    }
    .avatar-uploader:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>